<template>
	<view class="container">
		<!-- 查看缩略图 -->
		<text class="qxfont qx-list" @click="showList"></text>
		<!-- 顶部轮播图 -->
		<view class="page-section-spacing">
			<swiper class="swiper" 
			style="width: 100%;height: 100%;"
				:indicator-dots="false" 
				interval="5000" 
				duration="0"
				circular="false"
				:current="current"
				@change="changeIdx"
			>
				<swiper-item v-for="(item , index) in homeSlide" :key="index">
					<image :lazy-load="true" style="width: 100%;height: 100%;" :src="item.img" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- 工具条/操作 -->
		<view class="too-bar">
			<text>{{slideIdx}}/{{homeSlide.length}}</text>
			<slider 
			:value="slideIdx" 
			min="1"
			:max="homeSlide.length" 
			@change="sliderChange" 
			activeColor="#007AFF" 
			backgroundColor="#bbb" 
			block-size="15"
			/>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				animateType:0,
				current:0,
				slideIdx:1,
				//轮播图
				homeSlide: [
					{
						img:'../../static/docDetails/01.JPG'
					},{
						img:'../../static/docDetails/02.JPG'
					},{
						img:'../../static/docDetails/03.JPG'
					},{
						img:'../../static/docDetails/04.JPG'
					},{
						img:'../../static/docDetails/05.JPG'
					},{
						img:'../../static/docDetails/06.JPG'
					},{
						img:'../../static/docDetails/07.JPG'
					},{
						img:'../../static/docDetails/08.JPG'
					},{
						img:'../../static/docDetails/09.JPG'
					},
				],
				iconType: ['person']
			}
		},
		onLoad(arg) {
			const id = arg.id
			if(arg.current){
				this.current =	arg.current
				this.slideIdx = parseInt(arg.current)+1
			}
		},
		watch:{
			current(idx){
				this.slideIdx = parseInt(idx)+1
			}
		},
		methods:{
			// 页码发生改变
			changeIdx(e){
				let idx = e.detail.current
				this.current = idx
			},
			sliderChange(e) {
				this.current = e.detail.value-1
			},
			// 查看缩略图
			showList(){
				uni.navigateTo({
					url: './list?id=doc1&idx='+this.slideIdx+''
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	@import "https://at.alicdn.com/t/font_1728885_4c8akkbmmo7.css";//阿里图标库
	
	@import "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.css";//动画库
	.container{
		font-family: '思源黑体';
		position: absolute;
		left: 0;
		right: 0;
		height: 100%;
		.page-section-spacing{
			height: 100%;
		}	
	}
	// 覆盖滑块插件样式
	// /deep/.uni-slider-thumb{
	// 	border-radius: 0 !important;
	// 	border: 1px solid #007AFF;
		
	// 	background-color: unset !important;
	// }	
	
	/deep/ uni-slider .uni-slider-handle-wrapper{
		height: 1px !important;
	}
	.too-bar{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		text{
			position: absolute;
			top: -15px;
			left: 0;
			right: 0;
			text-align: center;
			font-size: 14px;
		}
	}
	.qx-list{
		position: absolute;
		top: 10rpx;
		right: 15rpx;
		z-index: 999;
	}
</style>
